<style lang='scss'>
  .left-menu {
    &:not(.el-menu--collapse) {
      flex-shrink: 0;
      width: 12%;
      min-width: 200px;
    }
    &.el-menu--collapse .el-submenu__title {
      height: 46px;
      line-height: 46px;
    }
    .collapse-btn {
      position: absolute;
      right: -16px;
      top: 50%;
      font-size: 26px;
      font-weight: bold;
      width: 16px;
      border-radius: 0 18px 18px 0;
      text-align: center;
      line-height: 46px;
      height: 46px;
      cursor: pointer;
      div {
        margin-top: -2px;
        margin-left: -2px;
      }
    }
  }
  .el-menu--vertical {
    .el-menu-item {
      height: 42px;
      line-height: 42px;
    }
  }
</style>
<template>
	<el-menu
    class="left-menu"
    :background-color="site_theme.navBarBg"
    :text-color="site_theme.navBarColor"
    :active-text-color="site_theme.navBarSelect"
    :collapse="collapse"
    @mouseover.native="menuHover"
    @mouseleave.native="menuLeave"
    @select="navSelect"
    :default-active="sub_router_name">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>用户管理</span>
      </template>
      <el-menu-item index="add_user">添加用户</el-menu-item>
      <el-menu-item index="add_user_excel">导入用户</el-menu-item>
      <el-menu-item index="scan_user">查看用户</el-menu-item>
    </el-submenu>
    <el-submenu index="scan_job" v-if="collapse">
    	<template slot="title">
        <i class="el-icon-view"></i>
        <span>职位查看</span>
      </template>
      <el-menu-item index="scan_job">职位查看</el-menu-item>
    </el-submenu>
    <el-menu-item index="scan_job" v-else>
      <template slot="title">
        <i class="el-icon-view"></i>
        <span>职位查看</span>
      </template>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-tickets"></i>
        <span>信息录入</span>
      </template>
      <el-menu-item index="add_record_single">单个添加</el-menu-item>
      <el-menu-item index="add_record_excel">文件导入</el-menu-item>
      <el-menu-item index="add_title">数据标题</el-menu-item>
      <el-menu-item index="scan_record">查看记录</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>设置</span>
      </template>
      <el-menu-item index="personal">账户设置</el-menu-item>
      <el-menu-item index="site_setting">网站设置</el-menu-item>
    </el-submenu>
    <div class="collapse-btn" v-show="menu_hover" :style="`background-color:${site_theme.navBarBg};color:${site_theme.navBarColor};`" @click="triggerCollapse">
      <div>{{collapse?'›':'‹'}}</div>
    </div>
  </el-menu>
</template>
<script>
  import { lightColor } from 'assets/js/utils.js';
	export default {
    data() {
      return {
        collapse: false,
        menu_hover: false,
        sub_router_name: this.$router.currentRoute.name
      }
    },
    computed: {
      site_theme() {
        return this.$store.getters.theme_config;
      }
    },
    watch: {
      site_theme() {
        this.setIconColor()
      }
    },
    methods: {
      setIconColor() {
        let icon_color = this.site_theme.navBarIcon;
        document.querySelectorAll('.left-menu i').forEach(ele => ele.style.color = icon_color);
      },
      menuHover() {
        this.menu_hover = true;
      },
      menuLeave() {
        this.menu_hover = false;
      },
      triggerCollapse() {
        this.collapse = !this.collapse;
      },
      navSelect(name) {
        this.$router.push({name: name})
      }
    },
    mounted() {
      this.setIconColor();
    },
    created() {
      this.$store.dispatch('loadAdminInfo');
    }
	}
</script>